<template lang="html">
  <div class="resource-list sectionbg">
    <el-table
      height="100%"
      :data="tableDatas"
      :row-style='style'
      :row-class-name='tableRowClassName'
      :header-cell-style='headerStyle'
      :cell-style= '{border:"none",padding : "2px 0"}'
      :highlight-current-row='false'
      style="width: 100%">

      <el-table-column
        prop="k"
        label="资源">
      </el-table-column>
      <el-table-column
        label="今日新增">
        <template slot-scope='scope'>
          <span id='hackcss'>{{formatNum(scope.row.v1)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="历史总量">
        <template slot-scope='scope'>
          <span id='hackcss'>{{formatNum(scope.row.v2)}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>  
</template>

<script>
export default {
  props : {
    tableDatas : {
      type : Array,
    }
  },
  data(){
    return {
      style : {
        color : '#46d6ff',
        textAlign : 'center',
        border : 'none',
      },
      headerStyle : {
        backgroundColor : '#004dd9',
        fontSize : '14px',
        color : '#fff',
        textAlign : 'center',
        border : 'none',
        padding : '0'
      },
    }
  },
  methods : {
    tableRowClassName({row, rowIndex}){
      if(rowIndex%2 === 0){
        return 'one';
      }else {
        return 'two';
      }
    },
    formatNum(n){
       var b=parseInt(n).toString();
       var len=b.length;
       if(len<=3){return b;}
       var r=len%3;
       return r>0?b.slice(0,r)+","+b.slice(r,len).match(/\d{3}/g).join(","):b.slice(r,len).match(/\d{3}/g).join(",");
     },
  }
}
</script>

<style lang="scss">
  #hackcss {
    display: block;
    width: 100%;
    text-align: center;
  }
  tr.one {
     background : transparent !important;
   }
  tr.two {
     background : #0b37a1 !important;
   }
   .el-table--enable-row-hover .el-table__body tr:hover>td{
     background-color: rgba(0, 101, 221, 0.8) !important;
   }
   .el-table__body tr.current-row>td {
     background-color: rgba(16, 76, 147, 0.8) !important;
   }
  .rightTable {
    width: 100%;
    height: 100%;
  }
  .el-table::before {
    height: 0px!important;
  }
  .el-table{
    max-height: 100%;
    overflow: hidden !important;
    background-color: transparent !important;
    .cell{
      line-height: 30px;
      box-sizing: border-box;
    }
  } 
  .el-table__empty-block{
    background-color: transparent !important;
  }
  // 美化滚动条
  .el-table .gutter{
    background-color: #004dd9;
  }
  .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
    width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .el-table__body-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 8px;
    background: rgba(0, 101, 221, 0.6);
  }
  .el-table__body-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/
    border-radius: 8px;
    background: rgba(0, 101, 221, 0.4);
  }
</style>
